<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>缓动参数</title>

        <style>

            /* transition的第三个参数就是缓动参数，也是变化速度曲线 */
            /* ease：开头结尾慢 中间块
               linear：匀速
               ease-in：开始慢 越来越快
               ease-out：开始快 越来越慢
               ease-in-out：两头慢 中间快
               贝塞尔曲线
                  - 网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数
                            transitin：width  1s cubic-bezier（0.1, 0.7, 1.0, 0.1） 0s；
            */

            * {
                margin:0;
                padding:0;
            }

            .box {
                border: 1px solid #000;
            }
            .box p {
                width: 60px;
                height: 60px;
                background-color:orange;
                margin-bottom: 10px;
                position: relative;
                left: 0;
                transition: left 5s linear 0s;
            }
            .box p:nth-child(2) {
                transition-timing-function: ease;
            }
            .box p:nth-child(3) {
                transition-timing-function: ease-in;
            }
            .box p:nth-child(4) {
                transition-timing-function: ease-out;
            }
            .box p:nth-child(5) {
                transition-timing-function: ease-in-out;
            }
            .box p:nth-child(6) {
                transition-timing-function: cubic-bezier(.29, -0.98, .5, 1.76);
            }
            .box:hover p {
                left: 1000px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </body>
</html>